"use client";

import { useAppDispatch } from "@/store/hooks";
import { memo, useEffect } from "react";
import type { ReactNode, FC } from "react";

import {
  fetchBanners,
  fetchHotRecommends,
  fetchNewAlbums,
  fetchRangking,
  fetchResidentSingers,
  fetchTopAnchors,
} from "./store/recommended";
import TopBanners from "./c-cpns/top-banners";
import styles from "./style.module.scss";
import HotRecommends from "./c-cpns/hot-recommends";
import PersonalizeRd from "./c-cpns/personalize-rd";
import NewAlbum from "./c-cpns/new-album";
import TopRangking from "./c-cpns/top-rangking";
import dis_vip from "@/public/assets/img/dis_vip_card.png";
import ResidentSingers from "./c-cpns/resident-singers";
import TopAnchors from "./c-cpns/top-anchors";

interface IProps {
  children?: ReactNode;
}

const Recommended: FC<IProps> = (props) => {
  const dispath = useAppDispatch();
  useEffect(() => {
    dispath(fetchBanners());
    dispath(fetchHotRecommends());
    dispath(fetchNewAlbums());
    dispath(fetchRangking());
    dispath(fetchResidentSingers());
    dispath(fetchTopAnchors());
  }, []);
  return (
    <>
      <TopBanners />
      <div className={`${styles.sectionWrapper} w980`}>
        <div className={styles.sectionLeft}>
          <HotRecommends />
          <PersonalizeRd />
          <NewAlbum />
          <TopRangking />
        </div>
        <div className={styles.sectionRight}>
          <div className={styles.vip}>
            <img src={dis_vip.src} />
          </div>
          <div className={`${styles.login} sprite_02`}>
            <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
            <a className="sprite_02">用户登录</a>
          </div>
          <ResidentSingers></ResidentSingers>
          <TopAnchors></TopAnchors>
        </div>
      </div>
    </>
  );
};

export default memo(Recommended);
